@import (reference) "~weaver-mobile/dist/weaver-mobile.less";

@emailList: email-list;

.@{emailList} {
  height: 100%;
  overflow: hidden;
  .ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  &-view {
    height: 100%;
    padding-bottom: @search-bar-height + @button-height;
    box-sizing: border-box;
    &-with-check {
      padding-bottom: @search-bar-height + @button-height + @list-item-height;
    }
    &-with-tip {
      padding-bottom: @search-bar-height + @button-height + 22 * @hd;
    }
    &-with-check&-with-tip{
      padding-bottom: @search-bar-height + @button-height + @list-item-height + 22 * @hd;
    }
  }
  &-search-advanced-icon {
    color: @color-icon-base;
    &-unempty {
      color: @brand-primary !important;
    }
  }
  &-list-item {
    @w: 70 * @hd;
    @w1: 94 * @hd;
    @w0: 118 * @hd;
    &-account {
    //   .ellipsis;
    //   font-size: @font-size-heading;
    //   padding-right: @w + @h-spacing-lg;
      color: @color-text-paragraph;
      position: relative;
      font-size: @font-size-base;
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      align-items: flex-start;
      .user-info {
        .ellipsis;
        // flex: 1.2;
        flex: 1 1 auto;
      }
      &-extra {
        // flex: 1;
        // align-self: flex-end;
        display: flex;
        flex: 0 0 auto;
        .ellipsis;
    //     position: absolute;
    //     top: 0;
    //     right: 0;
    //     // width: @w + @h-spacing-md;
        // min-width: @w + @h-spacing-md;
        .am-icon {
          margin-right: @h-spacing-md;
          padding-top: 3 * @hd;
          &.am-icon-blog-xing {
            color: @icon-html;
          }
        }
      // }
      &-time {
    //     float: right;
        color: @color-text-caption;
        font-size: @font-size-caption-sm;
        line-height: 24 * @hd;
    //     width: 100%;
        // text-align: right;
      }
    //   &-1 {
    //     padding-right: @w1 + @h-spacing-md;
    //     .@{emailList}-list-item-account-extra {
    //       width: @w1;
    //     }
    //   }
    //   &-0 {
    //     padding-right: @w0 + @h-spacing-md;
    //     .@{emailList}-list-item-account-extra {
    //       width: @w0;
    //     }
      }
    }
    &-unread {
      display: inline-block;
      width: 8 * @hd;
      height: 8 * @hd;
      background: @brand-primary;
      border-radius: 50%;
      margin-right: @h-spacing-md;
    }
    &-important {
      padding-right: @v-spacing-sm;
      color: @brand-important;
    }
    &-theme {
      display: flex;
      justify-content: space-between;
      .account-type {
        flex-shrink: 0;
        .am-icon-zhuzhanghao {
          color: @icon-html;
        }
        .am-icon-cizhanghao {
          color: @color-text-disabled;
        }
      }
    }
    &-subject {
      .ellipsis;
      color: @color-text-paragraph;
      font-size: @font-size-caption-sm;
    }
    &-content {
      .ellipsis;
      color: @color-text-caption;
      font-size: @font-size-caption-sm;
    }
    &-tags {
      margin-top: @h-spacing-md;
      .am-tag {
        color: @color-text-base-inverse;
        max-width: 100%;
        .am-tag-text {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      &-tag {
        .ellipsis;
        max-width: 30%;
        display: inline-block;
        height: 22 * @hd;
        line-height: 22 * @hd;
        font-size: @font-size-caption-sm;
        padding: 0 @h-spacing-md;
        margin-right: @h-spacing-md;
        border-radius: @radius-xs;
      }
    }
    &-doing {
      .ellipsis;
      color: @color-text-caption;
      font-size: @font-size-caption-sm;
      width: fit-content;
      .am-icon-blog-bujiao {
        color: @brand-primary;
        margin-right: @h-spacing-sm;
        vertical-align: bottom;
      }
    }
  }
  &-swipe-action {
    color: @fill-base;
    &-more {
      background-color: @fill-disabled;
    }
    &-star {
      background-color: @icon-html;
    }
    &-delete {
      background-color: @brand-error;
    }
  }
  &-all {
    .hairline('bottom');
    & > span {
      flex: 1 1;
    }
    & > span:nth-child(1) {
      flex: 2 1;
    }
    &-cancel {
      color: @brand-primary;
      margin-right: @h-spacing-md;
    }
    &-select {
      margin-right: @h-spacing-lg;
      float: right;
    }
  }
  .email-nav-bar,
  .email-action-buttons {
    position: absolute;
    bottom: 0;
    left: 0;
  }

  &-tip {
    text-align: center;
    color: @color-text-secondary;
    padding: @v-spacing-xs 0;
  }
}